<!-- components/template-designer/LayoutTablePropertyEditor.vue -->
<template>
  <div class="layout-table-property-editor">
    <div class="property-section">
      <h4 class="section-title">表格属性</h4>
      
      <el-form :model="localComponent.content" label-width="80px" size="mini">
        <el-form-item label="列数">
          <el-input-number
            v-model="columnCount"
            :min="1"
            :max="20"
            @change="updateColumnCount"
          />
        </el-form-item>
        
        <el-form-item label="行数">
          <el-input-number
            v-model="rowCount"
            :min="1"
            :max="50"
            @change="updateRowCount"
          />
        </el-form-item>
        
        <el-form-item label="默认列宽">
          <el-input-number
            v-model="defaultColumnWidth"
            :min="30"
            :max="500"
            @change="updateColumnWidths"
          />
        </el-form-item>
        
        <el-form-item label="默认行高">
          <el-input-number
            v-model="defaultRowHeight"
            :min="20"
            :max="500"
            @change="updateRowHeights"
          />
        </el-form-item>
      </el-form>
    </div>

    <div class="property-section" v-if="selectedCell">
      <h4 class="section-title">选中单元格属性</h4>
      
      <el-form size="mini" label-width="80px">
        <el-form-item label="宽度">
          <el-input-number
            v-model="selectedCell.width"
            :min="30"
            :max="500"
            @change="handleCellUpdate"
          />
        </el-form-item>
        
        <el-form-item label="高度">
          <el-input-number
            v-model="selectedCell.height"
            :min="20"
            :max="500"
            @change="handleCellUpdate"
          />
        </el-form-item>
      </el-form>
    </div>

    <div class="property-section">
      <h4 class="section-title">合并信息</h4>
      
      <div class="merge-info" v-if="localComponent.content.merges.length > 0">
        <div
          v-for="(merge, index) in localComponent.content.merges"
          :key="index"
          class="merge-item"
        >
          合并区域: ({{ merge.startRow }},{{ merge.startCol }}) - 
          ({{ merge.endRow }},{{ merge.endCol }})
          <el-button
            type="text"
            size="mini"
            icon="el-icon-close"
            @click="removeMerge(index)"
          ></el-button>
        </div>
      </div>
      <div v-else class="no-merges">
        暂无合并单元格
      </div>
    </div>

    <div class="property-actions">
      <el-button
        type="danger"
        size="mini"
        icon="el-icon-delete"
        @click="handleDelete"
      >
        删除表格
      </el-button>
    </div>
  </div>
</template>

<script>
import { deepClone } from '@/utils/tools'

export default {
  name: 'LayoutTablePropertyEditor',
  props: {
    component: {
      type: Object,
      required: true
    },
    config: {
      type: Object,
      default: () => ({})
    },
    selectedCellData: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      localComponent: {},
      defaultColumnWidth: 150,
      defaultRowHeight: 100
    }
  },
  computed: {
    columnCount: {
      get() {
        if (!this.localComponent.content.rows || this.localComponent.content.rows.length === 0) {
          return 3
        }
        return this.localComponent.content.rows[0].cells.length
      },
      set(value) {
        this.updateColumnCount(value)
      }
    },
    
    rowCount: {
      get() {
        return this.localComponent.content.rows?.length || 2
      },
      set(value) {
        this.updateRowCount(value)
      }
    },
    
    selectedCell() {
      return this.selectedCellData
    }
  },
  watch: {
    component: {
      handler(newVal) {
        this.localComponent = deepClone(newVal)
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    updateColumnCount(newCount) {
      const currentCount = this.columnCount
      
      if (newCount > currentCount) {
        // 增加列
        this.localComponent.content.rows.forEach(row => {
          for (let i = currentCount; i < newCount; i++) {
            row.cells.push({
              width: this.defaultColumnWidth,
              height: row.height,
              components: []
            })
          }
        })
      } else if (newCount < currentCount) {
        // 减少列
        this.localComponent.content.rows.forEach(row => {
          row.cells.splice(newCount)
        })
        
        // 调整合并信息
        this.adjustMergesAfterColumnDelete(newCount)
      }
      
      this.handleUpdate()
    },
    
    updateRowCount(newCount) {
      const currentCount = this.rowCount
      
      if (newCount > currentCount) {
        // 增加行
        for (let i = currentCount; i < newCount; i++) {
          this.localComponent.content.rows.push({
            height: this.defaultRowHeight,
            cells: Array(this.columnCount).fill().map(() => ({
              width: this.defaultColumnWidth,
              height: this.defaultRowHeight,
              components: []
            }))
          })
        }
      } else if (newCount < currentCount) {
        // 减少行
        this.localComponent.content.rows.splice(newCount)
        
        // 调整合并信息
        this.adjustMergesAfterRowDelete(newCount)
      }
      
      this.handleUpdate()
    },
    
    updateColumnWidths() {
      this.localComponent.content.rows.forEach(row => {
        row.cells.forEach(cell => {
          cell.width = this.defaultColumnWidth
        })
      })
      this.handleUpdate()
    },
    
    updateRowHeights() {
      this.localComponent.content.rows.forEach(row => {
        row.height = this.defaultRowHeight
        row.cells.forEach(cell => {
          cell.height = this.defaultRowHeight
        })
      })
      this.handleUpdate()
    },
    
    handleCellUpdate() {
      this.handleUpdate()
    },
    
    removeMerge(index) {
      this.localComponent.content.merges.splice(index, 1)
      this.handleUpdate()
    },
    
    handleUpdate() {
      this.$emit('update', this.localComponent)
    },
    
    handleDelete() {
      this.$emit('delete', this.localComponent.id)
    },
    
    // 调整合并信息的方法
    adjustMergesAfterColumnDelete(deleteIndex) {
      if (!this.localComponent.content.merges) return
      
      this.localComponent.content.merges = this.localComponent.content.merges.filter(merge => {
        if (deleteIndex >= merge.startCol && deleteIndex <= merge.endCol) {
          if (merge.startCol === merge.endCol) {
            return false
          } else if (deleteIndex === merge.startCol) {
            merge.startCol++
          } else if (deleteIndex === merge.endCol) {
            merge.endCol--
          } else {
            this.localComponent.content.merges.push({
              startRow: merge.startRow,
              startCol: deleteIndex + 1,
              endRow: merge.endRow,
              endCol: merge.endCol
            })
            merge.endCol = deleteIndex - 1
          }
        } else if (merge.startCol > deleteIndex) {
          merge.startCol--
          merge.endCol--
        } else if (merge.endCol > deleteIndex) {
          merge.endCol--
        }
        return true
      })
    },
    
    adjustMergesAfterRowDelete(deleteIndex) {
      if (!this.localComponent.content.merges) return
      
      this.localComponent.content.merges = this.localComponent.content.merges.filter(merge => {
        if (deleteIndex >= merge.startRow && deleteIndex <= merge.endRow) {
          if (merge.startRow === merge.endRow) {
            return false
          } else if (deleteIndex === merge.startRow) {
            merge.startRow++
          } else if (deleteIndex === merge.endRow) {
            merge.endRow--
          } else {
            this.localComponent.content.merges.push({
              startRow: deleteIndex + 1,
              startCol: merge.startCol,
              endRow: merge.endRow,
              endCol: merge.endCol
            })
            merge.endRow = deleteIndex - 1
          }
        } else if (merge.startRow > deleteIndex) {
          merge.startRow--
          merge.endRow--
        } else if (merge.endRow > deleteIndex) {
          merge.endRow--
        }
        return true
      })
    }
  }
}
</script>

<style scoped>
.layout-table-property-editor {
  padding: 0;
}

.property-section {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e6e8eb;
}

.section-title {
  margin: 0 0 15px 0;
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

.merge-info {
  max-height: 200px;
  overflow-y: auto;
}

.merge-item {
  padding: 8px;
  margin-bottom: 8px;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  background: #fafafa;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.no-merges {
  text-align: center;
  color: #999;
  font-style: italic;
  padding: 20px;
}

.property-actions {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #e6e8eb;
}
</style>